<template>
    <dl>
        <dd>
            <h4>{{list_title}}</h4>
            <p><span>{{date}}</span></p>
        </dd>
        <dt>
            <img :src="list_img" alt="">
        </dt>
    </dl>
</template>

<script>
export default {
    mounted(){
        console.log(this.list_date)
        let  befor = new Date(this.list_date)
        let  now = new Date()
        let seconds = Math.abs(befor.getTime()-now.getTime()) 
        if(seconds>=7*24*60*60*1000){
            this.date=this.list_date.split(" ")[0]
        }else if(seconds>24*60*60*1000){
            var day = seconds/1000/60/60/24;
            this.date=parseInt(day)+"天前"
        } else{
            let hours = seconds/1000/60/60
            this.date= parseInt(hours)+"小时前"
        }
        // console.log(this.date)
    },
    data(){
        return {
            date:""
        }
    },

    // props:["list_title","list_date","list_img"]
    props:{
        list_title:{
            type:String
        },
        list_img:{
            type:String
        },
        list_date:{
            type:String
        }
    },
}
</script>

<style scoped>
dl{
    box-sizing: border-box;
    padding: 0 .2rem;
    display:flex;
    justify-content: space-between;
    overflow: hidden;
}
dd{
    /* width: 2.2rem; */
    flex: 1;
}
dd h4{
    font-size: .14rem;
    line-height: .22rem;
    height: .44rem;
    
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
dd p{
    margin-top: .04rem;
    font-size: .1rem;
    color: #939393;
}
dt{
    width: .68rem;
    margin-left: .22rem;
  
}
dt img{
    width: 100%;
}
</style>